<template>
  <div class="index myindex">
    <!-- 轮播图 -->
    <!-- Swiper -->
    <div class="swiper-container backgroundfff">
      <h4 style="color: #fff">交易链</h4>
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(value, index) in blockchainInfo"
          :key="index"
        >
          <div class="iq-blog-box">
            <h5 class="blog-title">Block {{ value.hash }}</h5>
            <div class="boxline">
              <ul>
                <li>区块高度:{{ value.index }}</li>
                <li>PreHash:{{ value.previous_hash }}</li>
                <li>时间戳:{{ value.timeStamp }}</li>
              </ul>
            </div>
            <div v-if="value.transactionInfo != null">
              <ul>
                <li>买方：{{ value.transactionInfo.buyer }}</li>
                <li>卖方：{{ value.transactionInfo.seller }}</li>
                <li>
                  {{ "成交时间：" + value.transactionInfo.trade_time }}
                </li>
                <li>成交价：{{ value.transactionInfo.price }}</li>
                <li>成交量：{{ value.transactionInfo.contract_elec }}</li>
              </ul>
            </div>
            <div style="min-height: 180px" v-else>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-container backgroundfff">
      <h4 style="color: #fff">调度链</h4>
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(value, index) in schedulingChain"
          :key="index"
          style="margin-bottom: 10px"
        >
          <div class="iq-blog-box">
            <h5 class="blog-title">Block {{ value.hash }}</h5>
            <div class="boxline">
              <ul>
                <li>区块高度:{{ value.index }}</li>
                <li>PreHash:{{ value.previous_hash }}</li>
                <li>时间戳:{{ value.timeStamp }}</li>
              </ul>
            </div>
            <div v-if="value.scheduling != null">
              <ul>
                <li>买方：{{ value.scheduling.buyer }}</li>
                <li>卖方：{{ value.scheduling.seller }}</li>
                <li>合约成交量：{{ value.scheduling.contractElec }}</li>
                <li>买方出电量：{{ value.scheduling.useElec }}</li>
                <li>卖方出电量：{{ value.scheduling.outputElec }}</li>
                <li>违约者：{{ value.scheduling.defaulter }}</li>
                <li>买方积分：{{ value.scheduling.buyer_credit_point }}</li>
                <li>卖方积分：{{ value.scheduling.seller_credit_point }}</li>
              </ul>
            </div>
            <div style="min-height: 250px" v-else>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!--导航器-->
    <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
  </div>
</template>
<script>
// 引入swiper插件的js
import { getChain, getSchain } from "@/api/blockchain";
import moment from "moment";
import Swiper from "swiper";
export default {
  name: "index",
  data() {
    return {
      moment: moment,
      blockchainInfo: undefined,
      schedulingChain: undefined,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.myswiper();
    });
    getChain().then((res) => {
      for (var i = 0; i < res.data.length; i++) {
        res.data[i].transactionInfo.buyer =
          "..." + res.data[i].transactionInfo.buyer.slice(30, 45) + "...";
        res.data[i].transactionInfo.seller =
          "..." + res.data[i].transactionInfo.seller.slice(30, 45) + "...";
      }
      this.blockchainInfo = res.data;
      console.log(res.data);
    });
    getSchain().then((res) => {
      for (var i = 0; i < res.data.length; i++) {
        res.data[i].scheduling.buyer =
          "..." + res.data[i].scheduling.buyer.slice(30, 45) + "...";
        res.data[i].scheduling.seller =
          "..." + res.data[i].scheduling.seller.slice(30, 45) + "...";
        if (
          res.data[i].scheduling.defaulter !== "无" &&
          res.data[i].scheduling.defaulter !== "双方均违约"
        ) {
          res.data[i].scheduling.defaulter =
            "..." + res.data[i].scheduling.defaulter.slice(30, 45) + "...";
        }
      }
      this.schedulingChain = res.data;
    });
  },
  methods: {
    myswiper() {
      var swiper = new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        autoHeight: "true", //开启自适应高度,容器高度由slide高度决定
        //分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //分页器按钮可点击
        },
        slidesPerView: 5,
      });
    },
  },
};
</script>
<style>
</style>